<template>
  <div class="blogInfoContent">
    <div class="blogger_info">
      <img :src="bloggerInfo.bloggerPic" alt>
      <span class="blogger_name">{{bloggerInfo.bloggerName}}</span>
      <span class="fans_num">{{bloggerInfo.fansNum}}粉丝</span>
      <div>
        <router-link to="/" class="chat">和ta聊天</router-link>
        <router-link to="/" class="gz">关注ta</router-link>
      </div>
    </div>
    <div 
      class="article_info" 
      v-for="(item,index) in bloggerArticles" 
      :key="index"
      v-if="bloggerArticles.length>0"
    >
      <img :src="item.articlePic" alt>
      <div clss="article_title">
        <span>今日推荐</span>
        |
        <span>{{item.title}}</span>
      </div>
    </div>
    <div v-else>数据正在加载中...</div>
  </div>
</template>

<script>
export default {
  name: "BlogInfoContent",
  data() {
    return {
      bloggerInfo: {},
      bloggerArticles: []
    }
  },
  mounted() {
    this.$axios.get("http://localhost:3000/api/bloggerInfo",{
      params: {
        bloggerId: this.$route.params.bloggerId
      }
    })
    .then(res => {
      console.log(res.data);
      this.bloggerInfo = res.data[0];
      this.bloggerArticles = this.bloggerInfo.bloggerArticles;
    })
    .catch(error => {
      console.log(new error(error))
    })
  }
}
</script>
<style lang="less" scoped>
  .blogInfoContent{
    width: 96%;
    margin: 30px auto 0;
    position: absolute;
    top: 60px;
    left: 2%;
    // 博主信息样式
    .blogger_info{
      background-color: #fff;
      text-align: center;
      padding: 10px 0;
      border-radius: 8px;
      box-shadow: 0 2px 20px rgba(0,0,0,.15);
      margin-bottom: 10px;
      img{
        width: 80px;
        height: 80px;
      }
      span{
        display: block;
        color: #333;
        font-size: 14px;
      }
      a{
        color: #808080;
        border: 1px solid #808080;
        font-size: 12px;
        padding: 3px 10px;
        border-radius: 12px;
        width: 50px;
        display: inline-block;
        margin-top: 10px;
      }
      .chat{
        margin-right: 30px;
      }
      .gz{
        margin-left: 30px;
      }
    }
    //博主文章样式
    .article_info{
      background-color: #fff;
      height: 200px;
      padding: 10px;
      border-radius: 8px;
      box-shadow: 0 2px 20px rgba(0,0,0,.15);
      margin-bottom: 10px;
      img{
        width: 100%;
        height: 170px;
      }
      .article_title{
        color: #808080;
        font-size: 12px;
        margin-top: 20px;
      }
    }
  }
</style>


